<template>
  <div>


	<section class="featured-block text-center">
		<div class="container">


            <div>
                <table>

                    <tr>

                        <td>

                            用户名：

                        </td>
                        <td>

                            <input type="text" v-model='username' placeholder="请输入用户名">
                            
                        </td>

                    </tr>
                    
                    <tr>

                        <td>

                            密码：

                        </td>

                        <td>

                            <input type="text" v-model='password' placeholder="请输入密码">
                            
                        </td>

                    </tr>

                    <tr>
                        <td></td>
                        <td> <Button color='blue' @click="submit">登陆</Button> </td>

                    </tr>

                </table>
            </div>



		</div>
	</section>
	

	 
		
		

    
  </div>
  
</template>


 
<script>




export default {
  data () {
    return {
      msg: "这是一个变量",

      username:'',
      password:'',
    }
  },

  mounted:function(){

   
  
},
  methods:{
      //定义提交事件
      submit(){

          //非空验证
          if(this.username == ''){

              this.$Message('您没有输入用户名')
              return false
          }

          //请求后台接口
          this.axios.get('http://localhost:8000/logins',{params:{username:this.username,password:this.password}}).then(res=>{
              this.$Message(res.data.mes)
              console.log(res);
              
              //登陆成功之后将用户信息存入localStorage
              if (res.data.code==200){
                  localStorage.setItem('username',res.data.username)
                  localStorage.setItem('uid',res.data.uid)

                  this.$router.push('/');
              }
          })
      }
     
  }
}


</script>
 
<style>

td {
    padding: 10px;
}

</style>